<template>
  <div>
    <content-header :title="routeItem.title"></content-header>
    <ul class="xui-margin-top-lg way-list xui-fc">
      <li v-for="(item,index) in listData" :key="index">
        <router-link :to="`${routePath}/detail/${item.id}`">
          <div class="way">
            <img-box
              :width="445"
              :height="220"
              :imgSrc="item.coverUrl"
            >
            </img-box>
            <div class="way__title xui-padding-horizontal-sm">
              <span>{{item.title}}</span>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  import ContentHeader from "@/components/widge/content-header";
  import ImgBox from "@/components/widge/img-box";
  import {getNewsInfoList} from "@/api/news";
  import {getDetail} from "@/api/detail";
  import {getList} from "@/api/list";

  export default {
    components: {
      "img-box": ImgBox,
      ContentHeader
    },
    props: {
      title: Object
    },
    data() {
      return {
        listData: {}
      };
    },
    computed: {
      route() {
        let siteMap = this.$store.getters.siteMap;
        return this.$route.name;
      },
      routeItem() {
        let routes = this.$store.getters.siteMap;
        let result;
        routes.forEach(route => {
          if (route.children) {
            route.children.forEach(child => {
              if (child.name == this.$route.name) {
                result = child;
              }
            });
          }
        });
        return result;
      },
      navId() {
        return this.$route.name.split("-").pop();
      },
      routePath() {
        return this.$route.path;
      }
    },

    methods: {
      refreshList() {
        getList(this.routeItem.id).then(res => {
          this.listData = res.data.recordsList;
        });
      }
    },
    mounted() {
      this.refreshList();
    }
  };
</script>

<style lang='less' scoped>
  .way-list li {
    width: 460px;
    height: 236px;
    border: 2px solid #fff;
    float: left;
    margin: 0 5px 20px 0;
    cursor: pointer;
  }

  .way-list li:hover {
    border: 2px solid #c5b38d;
  }

  .way-list li:hover .way__title {
    background-color: #bba068;
    color: #fff;
  }

  .way-list li:nth-child(2) {
    margin-right: 0;
  }

  .way {
    width: 445px;
    height: 220px;
    position: relative;
  }

  .way .way__title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*width: 169px;*/
    height: 36px;
    background-color: #ffffff;
    border-radius: 25px;
    color: #232323;
  }

  .way .way__title > span {
    display: block;
    font-size: 15px;
    text-align: center;
    height: 36px;
    line-height: 36px;
  }

  .img-box {
    margin: 6px 5px;
  }
</style>

